<template>
	<view class="content">

		<view class="gui-padding">

			<view class="gui-padding gui-border-radius-large"
				style="box-shadow: 3rpx 3rpx 3rpx #ccc;border: solid 1rpx #ccc; background-color: rgba(255, 255, 255, 0.6);">
				团费‌是指中国共产主义青年团团员向团组织交纳的活动经费，是团组织的合法收入。团费的来源主要包括团员交纳的团费、党和政府以及企事业单位关于青少年事业的专项经费、团属经济实体收益、正当的社会资助和团组织的其它合法收入‌
			</view>

			<view v-if="show_msg" class="gui-h3 text-center gui-padding gui-border-radius-large gui-margin-top"
				style="box-shadow: 3rpx 3rpx 3rpx #ccc;border: solid 1rpx #ccc; background-color: rgba(255, 255, 255, 0.6);">
				{{msg}}
			</view>

			<!-- <view class="gui-padding gui-border-radius-large gui-margin-top"
				style="box-shadow: 3rpx 3rpx 3rpx #ccc;border: solid 1rpx #ccc; background-color: rgba(255, 255, 255, 0.6);">
				<view class="gui-card-body gui-h4 " style="line-height: 2rem;">
					系统升级维护中，敬请期待
				</view>
			</view> -->

			<view v-else class="gui-padding gui-border-radius-large gui-margin-top"
				style="box-shadow: 3rpx 3rpx 3rpx #ccc;border: solid 1rpx #ccc; background-color: rgba(255, 255, 255, 0.6);">
				<view class="gui-card-body gui-h4 " style="line-height: 2rem;">
					<view>名称: <text style="font-weight: bold; margin-left: 10rpx;">{{forms.feenoticeform}}</text></view>
					<!-- <view v-if="forms.feenoticeform">
						日期: {{forms.feenoticeform_model.start_date}} ~ {{forms.feenoticeform_model.end_date}}
					</view> -->
					<view>金额: {{forms.money}}</view>
				</view>
			</view>

			<!-- <view style="width: 85%; margin: 0 auto; margin-top: 60rpx;">
				<button @click="wx_pay">微信支付</button>
				<button @click="app_pay">app支付</button>
				<button @click="abc_pay">微缴费</button>
			</view> -->

			<view v-if="forms.money > 0" class="gui-color-black2 gui-border-radius-large gui-margin-top gui-padding"
				style="box-shadow: 3rpx 3rpx 3rpx #ccc;border: solid 1rpx #ccc; background-color: rgba(255, 255, 255, 0.6);">
				<text style="color: rgba(0, 0, 0, 0.8);">请选择支付方式:</text>
				<!-- @click="wx_pay" -->
				<gui-radio v-if="payTypes.wx" class="pay_type" :checked="payType=='wx'" @change="payType='wx'">
					<view class="gui-flex gui-align-items-center" style="gap: 20rpx; margin: 5rpx 0;">
						<image mode="aspectFit" class="pay_icon" src="../../static/pay/new/wxzf.png" />微信支付
					</view>
				</gui-radio>
				<gui-radio v-if="payTypes.abcBridge" class="pay_type" :checked="payType=='abcBridge'"
					@change="payType='abcBridge'">
					<view class="gui-flex gui-align-items-center" style="gap: 20rpx; margin: 5rpx 0;">
						<image class="pay_icon" src="../../static/pay/new/wjf.png" />微缴费
					</view>
				</gui-radio>
				<gui-radio v-if="payTypes.app" class="pay_type" :checked="payType=='app'" @change="payType='app'">
					<view class="gui-flex gui-align-items-center" style="gap: 20rpx; margin: 5rpx 0;">
						<image class="pay_icon" src="../../static/pay/new/nhzy.png" />农行掌银
					</view>
				</gui-radio>
			</view>

			<view style="width: 90%; margin: 0 auto; margin-top: 60rpx;" v-if="forms.money > 0">
				<button type="default" @click="to_pay"
					class="gui-button gui-gtbg-blue gui-box-shadow gui-noborder gui-border-radius-large"
					style="height: 100rpx;">
					<text class="gui-color-white gui-button-text gui-h3" style="line-height: 100rpx">立即缴费</text>
				</button>
				<!-- <button @click="get_data()">query</button> -->
			</view>

		</view>
	</view>
</template>

<script>
	import menuBar from "./menu_bar"
	export default {
		components: {
			menuBar
		},
		data() {
			return {
				show: false,
				forms: {
					
					// title: "团费",
					// money: null,
					// fe_id: 67,
					// examine_url: '/twjf/bill',
					// merchant_id: 'JF-EPAY2022042095221',
					
					
					feenoticeform: '团费',
					order_no: null,
					money: null
				},
				payTypes: {
					wx: false,
					app: true,
					abcBridge: true
				},
				payType: 'wx',
				money: 0,
				show_msg: true,
				msg: '查询账单中...',
				payConfig: {
					wx: {
						sysId: "gh_edf4ceb10043",
						appid: "wxcf5c7da8bb74c8af",
						path: "pages/jf/wxpay"
					},
					wx_abc: {
						sysId: "gh_a6986a2f785e",
						appid: "wx78642797f4ce5e50",
						path: "page/containers/payment/query-input/query-input"
					}
				},
			}
		},
		onShow() {
			this.get_data();
		},
		methods: {
			get_data() {
				let self = this;
				let data = {
					"fe_id": 67,
					"newApp": true
				};
				this.$boya.NPost("/app/twjf/bill", {
					data: data
				}, function(res) {
					console.log('res: ', res);
					if (res.data == "无未缴账单") {
						self.msg = "无未缴账单";
						self.show_msg = true;
					} else {
						let forms = res.data.split(',')
						self.forms.money = forms[0];
						self.forms.feeamount = forms[0];
						self.forms.order_no = forms[1];
						self.show_msg = false;
					}
				})
			},
			to_pay() {
				let self = this
				console.log('forms: ', self.forms);
				if (self.forms.order_no) {
					this.$boya.NGet("/app/pay/order_query", self.forms, function(res) {
						// 订单已支付
						console.log('res: ', res);
						self.$boya.msg(res.msg);
					}, function() {
						// 订单未支付
						console.log('缴费方式：', self.payType);
						switch (self.payType) {
							case '农行掌银':
								self.abc_pay();
								//农行app支付
								break;
							case '微缴费':
								self.abc_mini_pay()
								//农行微缴费小程序
								break;
						}
					})
				}
			},
			// 微信直缴
			wx_mini_pay() { //转到柳钢小程序支付
				var self = this;
				let title = '团费'
				let code = self.forms.feeamount + "-" + self.forms.order_no + "-0";
				console.log("code", code);
				console.log("path", self.payConfig.wx.path + "?code=" + code + "&title=" + title);
				//#ifdef APP-PLUS
				console.log(sweixin);
				sweixin ? sweixin.launchMiniProgram({
					id: self.payConfig.wx.sysId,
					path: self.payConfig.wx.path + "?code=" + code + "&title=" + title
				}) : plus.nativeUI.alert('当前环境不支持微信操作!');
				//#endif
			},
			// 农行微缴费小程序
			abc_mini_pay() {
				var self = this;
				console.log('self.payInfo.merchant_idself.payInfo.merchant_id: ', self.payInfo.merchant_id);
				//#ifdef APP-PLUS
				this.$comm.log("swexin:" + self.payConfig.wx_abc.path + "?code=" + self.payInfo.merchant_id);
				console.log(sweixin);
				sweixin ? sweixin.launchMiniProgram({
					id: self.payConfig.wx_abc.sysId,
					path: self.payConfig.wx_abc.path + "?code=" + self.payInfo.merchant_id
				}) : plus.nativeUI.alert('当前环境不支持微信操作!');
				//#endif  
			},
			wx_pay() {
				uni.postMessage({
					data: {
						type: 'wx_pay',
						data: {
							title: '微信支付',
							price: 0.01
						}
					}
				})
			},
		}
	}
</script>

<style>
	.content {
		width: 100vw;
		height: 100vh;
		background: url('../../static/pay/new/bj1.png') 100% 100% / 100% 100%;
	}

	.synopsis {
		margin: 0 auto;
		border: 5rpx solid black;
		border-radius: 20rpx;

		text-indent: 2em;
		/* 2个字符的宽度 */
		margin-top: 60rpx;
	}

	.pay_type {
		display: flex;
		align-items: center;
		gap: 20rpx;
		font-size: 1.2rem;
		/* border-bottom: 1rpx solid #ccc; */
		padding: 15rpx 10rpx;
		line-height: 50rpx;

		image {
			width: 60rpx;
			height: 60rpx;
			margin-right: 20rpx;
		}

		.gui-radio-lable {
			display: flex;
			align-items: center;
		}
	}

	.pay_icon {
		width: 30px;
		height: 30px;
	}
</style>